<template>
	<view class="container">
		<view :style="{height: (navigationBarHeight + statusBarHeight) + 'px'}"></view>
		<view class="back" @click="Back">
			<image src="../../static/img/Back.png" alt="" />
		</view>
		<view class="tab">
			<view class="account" :class="flag==0? 'active': ''" @click="changeAccountLogin" @blur="onBlury">账号登录</view>
			<view class="code" :class="flag==1? 'active': ''" @click="changeCodeLogin" @blur="onBlury">验证码登录</view>
		</view>
		<view class="contenta">
			<view class="accountModule" v-if="flag==0">
				<view class="ipt">
					<u--input placeholder="账号" prefixIcon="account" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="mobile" maxlength="11" type='number'></u--input>
					<br>
					<u--input placeholder="密码" prefixIcon="lock" prefixIconStyle="font-size: 22px;color: #909399"
						v-model="password"></u--input>
					<br>
					<view class="codeIpt" style="display: flex;">
						<u--input prefixIcon="order" placeholder="验证码" prefixIconStyle="font-size: 22px;color: #909399"
							v-model="smsCode"></u--input>
						<image class="ImgCode" :src="imgSrc" mode="" @click="getImgCode()"></image>
					</view>
				</view>
				<view class="btn" @click="Account()" :class="btnState1?'incomplete':''">
					登录
				</view>
				<!-- <view class="tip">
					<view class="forget">忘记密码</view>
					<view class="register">注册账号</view>
				</view> -->
			</view>
			<view class="codeModule" v-if="flag==1">
				<view class="ipt">
					<u--input placeholder="手机号" v-model="str.mobile" maxlength="11" type='number'></u--input>
					<br>
					<view class="codeIpt">
						<u--input placeholder="验证码" v-model="str.smsCode"></u--input>
						<view class="txt" @click="handleSend()">{{count==0?'获取验证码':count +'S'}}</view>
					</view>
				</view>
				<view class="btn" @click="loginy()" :class="btnState?'incomplete':''">登录</view>
				<view class="tip">
					<view class="forget">忘记密码</view>
					<view class="register">注册账号</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from 'vuex'
	import {
		SendCode,
		VerifyLogin,
		wxLogin,
		captchaImage,
		AccountLogin
	} from '@/common/api/login.js'
	import {
		CheckPhone
	} from '../../static/libs/util.js'
	export default {
		data() {
			return {
				// 登录方式标识
				flag: 0,
				// flagy:0,
				str: {
					// 手机号
					mobile: null,
					// uuid
					uuid: null,
					// 验证码
					smsCode: null
				},

				mobile: '', // 手机号码
				password: '', // 密码
				uuid: "", // 图片验证码code
				smsCode: "", // 验证码

				imgSrc: "", // 图片验证码

				count: 0,
				totalSec: 60,
				timer: null,

				statusBarHeight: 0, // 状态栏高度
				navigationBarHeight: 44, // 导航栏高度

				btnState: false, // 短信验证码
				btnState1: false // 账号密码
			}
		},
		computed: {
			countdownText() {
				return this.count < 1 ? '发送验证码' : this.count + '(s)重发'
			}
		},
		onLoad(options) {
			this.flag = options.flag
		},
		onShow() {
			// 获取状态栏高度
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;

			this.getImgCode()
		},
		methods: {
			...mapActions(['handSetToken']),
			// 切换登录方式
			changeAccountLogin() {
				this.flag = 0
				this.getImgCode()

				this.mobile = ''
				this.password = ''
				this.smsCode = ''
				this.uuid = ''
			},
			changeCodeLogin() {
				this.flag = 1
				this.str.mobile = null
				this.str.uuid = null
				this.str.smsCode = null
			},
			handleSend() {
				if (this.count > 0) return false
				if (!CheckPhone(this.str.mobile)) {
					this.$toast('请输入正确的手机号')
					return false
				}
				this.sendCode()
			},
			// 获取验证码接口
			sendCode() {
				var that = this
				that.$loading('正在发送短信');
				SendCode(that.str.mobile).then(res => {
					that.$hideLoading();
					if (res == undefined) {
						that.$toast('短信发送失败');
					}
					if (res.data.code == 200) {
						that.str.uuid = res.data.uuid
						that.countDown() // 倒计时
						that.$toast('发送成功', 'success');
					} else {
						that.$toast(res.msg);
					}
				})
			},
			countDown() {
				this.count = this.totalSec;
				this.timer = setInterval(() => {
					this.count--;
					if (this.count == 0) {
						clearInterval(this.timer);
					}
				}, 1000)
			},
			// 验证码登录
			loginy() {
				let that = this
				if (!that.btnState) {
					return false
				}

				if (!CheckPhone(this.str.mobile)) {
					this.$toast('请输入正确的手机号')
					return false
				} else if (this.str.smsCode == '') {
					this.$toast('请输入短信验证码')
					return false
				}
				that.$loading('登录中');
				VerifyLogin(
					this.str
				).then(res => {
					console.log(res);
					that.$hideLoading();
					that.$toast('登录成功', 'success');
					that.handSetToken(res.data.token);
					setTimeout(() => {
						uni.switchTab({
							url: "/pages/customer/main"
						})
					}, 500);
				})
			},
			// 获取图片验证码
			getImgCode() {
				captchaImage().then(res => {
					this.imgSrc = res.data.img
					this.uuid = res.data.uuid
				})
			},
			Account() {
				if (!this.btnState1) {
					return false
				}
				if (!CheckPhone(this.mobile)) {
					this.$toast('请输入正确的手机号')
					return false
				} else if (this.password == '') {
					this.$toast('请输入密码')
					return false
				} else if (this.smsCode == '') {
					this.$toast('请输入图片验证码')
					return false
				}
				AccountLogin({
					username: this.mobile,
					password: this.password,
					code: this.smsCode,
					uuid: this.uuid
				}).then(res => {
					console.log(res, 'shujushuju')
				})
			},
			// 返回上一级
			Back() {
				uni.navigateBack()
			}
		},
		watch: {
			str: {
				handler(newval, oldval) {
					if (newval.mobile && newval.smsCode) {
						this.btnState = true
					} else {
						this.btnState = false
					}
				},
				deep: true,
				immediate: true
			},
			mobile(newValue, oldValue) {
				if (newValue && this.password && this.smsCode) {
					this.btnState1 = true
				} else {
					this.btnState1 = false
				}
			},
			password(newValue, oldValue) {
				if (newValue && this.mobile && this.smsCode) {
					this.btnState1 = true
				} else {
					this.btnState1 = false
				}
			},
			smsCode(newValue, oldValue) {
				if (newValue && this.mobile && this.password) {
					this.btnState1 = true
				} else {
					this.btnState1 = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.container {
		padding: 0 30px;
		min-height: none;

		.tab {
			display: flex;
			padding: 0 10px;
			margin-top: 40rpx;

			.code {
				margin-left: 24px;
			}

			.account,
			.code {
				position: relative;
				color: #B3B3B3;
			}
		}

		.contenta {
			margin-top: 40px;

			.u-input {
				border: none !important;
				border-bottom: 1px solid #dadbde !important;
				font-size: 14px !important;
			}

			.uni-input-placeholder {
				font-size: 14px !important;
			}

			.btn {
				margin-top: 40px;
				width: 100%;
				color: #fff;
				background-color: #E9E9E9;
				padding: 8px 0;
				text-align: center;
				border-radius: 35px;
			}

			.incomplete {
				background-color: #5994EB !important;
			}

			.tip {
				font-size: 12px;
				color: #9F9F9F;
				margin-top: 16px;
				display: flex;
				justify-content: space-between;

				.register {
					color: #568bda;
				}
			}

			.codeModule {
				.codeIpt {
					display: flex;
					font-size: 12px;
					margin-top: 18px;
					color: #568bda;
					border-bottom: 1px solid #dadbde !important;

					.u-input {
						border: none !important;
					}

				}
			}
		}

		.ImgCode {
			width: 200rpx;
			height: 100rpx;
		}

		.other {
			margin-top: 160px;
			text-align: center;

			.txt {
				font-size: 12px;
				color: #9F9F9F;
			}

			image {
				margin-top: 6px;
				width: 45px;
				height: 36px;
			}
		}
	}

	.active {
		color: #000 !important;
	}

	.active:after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0px;
		height: 8px;
		background-color: #5d96ed;
		opacity: 0.6;
		z-index: -1;
	}

	.btny {
		width: 32px;
		height: 32px;
		// background-color: #000;
		// border: 0px solid red;
		display: inline-block;
		margin-right: 17px;
		border: none;

		image {
			transform: translate(-20px, -8px);

		}
	}

	.back {

		image {
			width: 24px;
			height: 24px;
		}
	}
</style>